/*
 * Copyright ©
 * #  入口文件
 * @author: zw
 * @date: 2021-09-04 
 */


import { defineComponent, reactive } from 'vue'
import menu from './data/menu'
import tree from './data/tree'
import carousel from './data/carousel'
export default defineComponent({
  name: 'App',
  props: {},
  setup(props, { emit, slots }) {
    const state = reactive({
      imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h821%2F20180216%2F6687-fyrpeif0540896.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617781028&t=b0e8cc7992bec442ec6fac5b2f1df79b',
      link: 'https://www.baidu.com',
      blank: false,
      imgWidth: 375,
      imgHeight: 481,
      magWidth: 100,
      magHeight: 100,
    });
    const Stars = reactive({
      num: 3,
      Size: 30
    });
    function setItemValue(val) {
      console.log(val)
    }
    function onStarNum(num) {
      console.log(num)
    }
    function modalConfirm() {
      console.log("点击了确定")
    }
    function modalCancel() {
      console.log("点击了取消")
    }
    return () => {
      const { imgUrl, link, blank, imgWidth, imgHeight, magWidth, magHeight } = state;
      const { Num, Size } = Stars;
      return (
        <div class='container'>
          <Selector
            placeholder="请选择框架"
            onSetItemValue={setItemValue}
            data={menu} />
          <br />
          <div class="aslide-bar">
            <tree-menu>
              { tree.map(item => !item.children ? <menu-item >{item.title}</menu-item> : <re-sub-menu data={item} /> ) }
            </tree-menu>
            <br />
          </div>
          <div class="carouse-warp">
            <Carousel
              autoplay
              deration={3000}
              initial={0}
              hasDot
              hasDirector
              dotBgColor="#000"
              >
              { carousel.map((item, index) => <CarItem key={index}><img src={require(`./assets/img/${item.img_name}`)} alt="" /></CarItem>) }
            </Carousel>
          </div>
          <div class="magnifier-wrapper">
            <Magnifier
            imgUrl={imgUrl}
            link={link}
            imgAlt={'裴秀智'}
            blank={blank}
            imgWidth={imgWidth}
            imgHeight={imgHeight}
            magWidth={magWidth}
            magHeight={magHeight}
            />

            <br />
            <Star
              num={3}
              size={Size}
              onStarNum={onStarNum}
            />
            <Modal
              show={true}
              width={350}
              borderRadius={10}
              headertextColor="#fff"
              headerColor="#007bff"
              headerText="this is modal"
              contextText='Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis odio culpa amet nisi vero dicta molestias fugit aliquid quidem, nemo iusto iste, veniam porro repellat voluptate. Cumque in provident distinctio.'
              contextTextColor="#ccc"
              position="center"
              btnGroupShow="No"
              onConfirm={modalConfirm}
              onCancel={modalCancel}
              />
          </div>
        </div>
      )
    }
  }
})
